<template>
	<view class="count-down-wrap">
		<view class="box" v-if="date!=''">
			<view class="cut_down_time_item">{{date}}
			</view>
			<text class="cut_down_times_tit1">天</text>
		</view>
		<view class="box" v-for="(item, index) in cutdownTime" :key="index">
			<view class="cut_down_time_item">
				{{item}}
			</view>
			<!-- <template v-if="typeStyle==1">
				<text v-if="index % 2 && index != cutdownTime.length - 1" class="cut_down_times_tit1">:</text>
			</template> -->
			<template>
				<text v-if="index ==0 || index == 1" class="cut_down_times_tit1">:</text>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			marginW: {
				type: String,
				default: '0 0 0 6rpx'
			},
			padding: {
				type: String,
				default: '16rpx 0'
			},
			paddingDay: {
				type: String,
				default: '16rpx 0'
			},
			fontColor: {
				type: String,
				default: '#353434'
			},
			titcolor: {
				type: String,
				default: '#353434'
			},
			endTime: {
				type: Number,
				default: 0
			},
			bgcolor: {
				type: String,
				default: 'linear-gradient(219.64deg, #FF3564 13.63%, #FB4027 94.34%)'
			},
			bgcolorDay: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			fontsizeDay: {
				type: Number,
				default: 28
			},
			typeStyle: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				cutdownTime: [],
				date: ''
			}
		},

		watch: {
			endTime: {
				deep: true,
				immediate: true,
				handler(newVal) {
					this.countTime()
				}
			}
		},
		// created() {
		// 	this.countTime()
		// },
		methods: {
			changeTime(a, b, c) {
				// if (this.typeStyle == 1) {
				// 	this.cutdownTime = [a.split(''), b.split(''), c.split('')].flat(1)
				// } else {
				// 	this.cutdownTime = [a, b, c]
				// }
				this.cutdownTime = [a, b, c]
			},
			finshTime() {
				this.$emit('finshTime')
			},

			countTime() {
				if (!this.endTime) {
					clearTimeout(this.timer)
					return
				}

				if (Date.now() <= this.endTime) {
					let t = this.endTime - Date.now()
					if (t / 1000 / 60 / 60 / 24 > 1) {
						this.date = parseInt(t / 1000 / 60 / 60 / 24).toString();
					}
					let hour = parseInt(t / 1000 / 60 / 60 % 24).toString().padStart(2, 0)
					let min = parseInt(t / 1000 / 60 % 60).toString().padStart(2, 0)
					let mm = parseInt(t / 1000 % 60).toString().padStart(2, 0)
					this.changeTime(hour, min, mm)
					this.timer = setTimeout(() => {
						this.countTime()
					}, 1000)
				} else {
					clearTimeout(this.timer)
					this.finshTime()
				}


			},


		}
	}
</script>

<style scoped>
	.count-down-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.count-down-wrap view {
		display: flex;
		align-items: center;
	}

	.cut_down_time_item {
		width: 55rpx;
		text-align: center;
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 400;
		color: #f4f3f7;
		line-height: 55rpx;
		background: url('/static/new/time_bg.png') no-repeat center;
		background-size: 100%;
	}

	.cut_down_times_tit1 {
		color: #353434;
		font-size: 28rpx;
		padding: 0 5rpx;
	}

	.box {
		display: flex;
		width: 100%;
		align-items: center;
	}
</style>